<template>
  <div>
    <ul class="zhenghe_ul2">
      <li
        class="zhenghe_li_qiu"
        v-for="item in list"
        :key="item"
        :class="{'active':isActive(item)}"
        @click="changeData(item)"
      >
        <b>{{item}}</b>
        <p>{{odds}}</p>
      </li>
    </ul>
  </div>
</template>

<script>
import _range from "lodash/range";
export default {
  props: {
    odds: {
      type: String | Number
    },
    name: {
      type: String
    }
  },
  data() {
    return {
      list: _range(10),
      activeArray: []
    };
  },
  methods: {
    clear(){
      this.activeArray = []
    },
    changeData(key) {
      let isIncludes = this.activeArray.includes(key);
      if (isIncludes) {
        this.activeArray.splice(this.activeArray.indexOf(key), 1);
      } else {
        this.activeArray.push(key);
      }
      let temp = [];
      this.activeArray.forEach(item => {
        temp.push({ type: this.name, value: item, odd: this.odds });
      });
      console.log(temp);
      this.$emit('handlerSelected', temp);
    },
    isActive(key) {
      return this.activeArray.includes(key);
    }
  }
};
</script>

<style>
.xuanze_xiazhu_ul .xuanze_xiazhu_li.red {
  background: #d21d17;
  color: #fff;
  border: none;
}

.xiazhu_chakan_ul .xiazhu_chakan_li.active {
  background: #d21d17 !important;
}

.zhenghe_ul2 .zhenghe_li_qiu.active {
  background: #d21d17;
}

.zhenghe_danshuang .zhenghe_span.active {
  background: #d21d17;
}
</style>
